<template>
    <div class="base-model">
        <el-container class="container">
            <transition :name="`${init ? 'animate__animated ' : ''}`" enter-active-class="animate__fadeIn "
                leave-active-class="animate__fadeOut " mode="out-in">
                <div class="dark-background" v-show="darkMode" />
            </transition>
            <c_header v-if="!mobile" />
            <tabBar v-else />
            <userAvatar :size="43" class="login-button forbid-select user-avatar" @click.capture="intoUser" />
            <login v-model="showLogin" />
            <el-main class="inner-main">
                <el-config-provider :locale="zhCn">
                    <slot />
                </el-config-provider>
            </el-main>
            <div class="setting default-style" @click="showSetting = !showSetting">
                <el-icon size="30px" color="rgba(255,255,255,1)">
                    <component :is="getIcon('setting')" />
                </el-icon>
            </div>
            <setting v-model="showSetting" />
            <base-footer v-if="!mobile" />
        </el-container>
    </div>
</template>

<script setup>
import { useRequest, usePageRefresh, useTouch } from "@usehook"
import { setWebsiteName } from "@/utils/auth"
import { storeToRefs, useMainStore, useUserStore } from "@/pinia"
import { getIcon, decryption, mobile } from "@/utils/tools"
import { useEventListener } from "@vueuse/core"
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { initPageStyle } from "@/utils/setting"
import tabBar from "@/components/tabBar/tabBar"
import router from "@/router"
import { addEmitterListener } from "@/utils/emitter"
import { publicKey } from "@/utils/constant"

// 网站基础信息
let webInfo = $ref({
    email: "",
    icpNumber: "",
    gaNumber: "",
    websiteName: "",
    name: "",
    captcha: false,
    allowUserPwd: false,
    expireTime: 60,
    domain: ""
})
// 是否显示登录框
let showLogin = $ref(false)
// 是否显示设置框
let showSetting = $ref(false)
// 获取基础数据
const getData = () => {
    useRequest({ url: "/loginfo/getData" }).then((resp) => {
        if (resp && resp.status) {
            const data = resp.data
            webInfo.name = data.name ? data.name : "松不渝"
            webInfo.captcha = data.captcha !== '0'
            webInfo.icpNumber = data['icp.number']
            webInfo.gaNumber = data['ga.number']
            webInfo.websiteName = data['website.name']
            webInfo.allowUserPwd = data['allow.user.password'] === "1"
            webInfo.expireTime = parseInt(data['qr.code.expire.second']) || 60
            if (webInfo.websiteName) setWebsiteName(webInfo.websiteName)
            publicKey.value = data.publicKey
            webInfo.domain = data.domain
            webInfo.email = data.email
            useMainStore().setWebInfo(webInfo)
        }
    })
}
// 是否是暗黑模式
let darkMode = $ref(false)
// 是否初始化
let init = $ref(false)
const userStore = useUserStore()
// 用户信息
const { islogin } = storeToRefs(userStore)
// 监听用户登陆状态，更新登录后需要加载的路由
watch(islogin, login => {
    if (login) useRequest.post("https://api.dansj.cn/reg/user/check").then(resp => {
        if (resp && resp.status) {
            userStore.updateUserInfo(JSON.parse(decryption(resp.data)))
        }
    })
}, { immediate: true })

useTouch.top(() => {
    if (mobile && !showSetting) showSetting = true
})

onMounted(() => {
    initPageStyle()
    usePageRefresh((type) => {
        if (type === 'refresh') {
            localStorage.setItem("refresh", new Date().getTime() + "")
        } else {
            localStorage.setItem("close", new Date().getTime() + "")
        }
    })

    nextTick(() => {
        darkMode = document.documentElement.classList.contains("dark")
        setTimeout(() => {
            init = true
        }, 0)
    })
    // 获取基础数据
    getData()
    // 禁用保存
    useEventListener(document, 'keydown', (event) => {
        if (event.code === 'KeyS' && event.ctrlKey) {
            event.preventDefault()
        }
    })
})

// 监听暗黑模式,切换时全局广播
useEventListener('darkMode', (evt) => {
    darkMode = !evt.value
})

// 显示登录框
const intoUser = () => {
    router.push("/user")
}

addEmitterListener("login", () => showLogin = true)
</script>

<style lang="scss" scoped>
:deep(.inner-main) {
    max-height: calc(100vh - 50px);
    border-radius: var(--border-radius);
    padding: 10px;
    overflow: hidden;
    color: var(--font-color);
    z-index: 1;
    height: 100%
}

.mobile .inner-main {
    padding: 5px;
    max-height: calc(100% - 55px);
}

.dark .inner-main {
    backdrop-filter: blur(5px);
}

.mobile.dark .inner-main {
    backdrop-filter: none
}

:deep(.container) {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: relative;
    background: transparent url("@/assets/image/bg.jpg") no-repeat 50%;
    background-size: cover;
    display: block;
}

.mobile .container {
    background-position: 50% !important;
}

:deep(.container::before) {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("@/assets/image/background.jpg");
    /* 初始时与父元素背景相同 */
    background-size: cover;
    opacity: 0;
    /* 初始时隐藏伪元素 */
}

.dark-background {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background: transparent url("@/assets/image/background.jpg") no-repeat 50%;
    background-size: cover;
}

.mobile .dark-background {
    background-position: 65% !important;
}

:deep(.base-model) {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
}

:deep(.setting) {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    border-radius: 50%;
    font-family: fojiya, monospace;
    transform: translateX(50px);
    transition: transform 0.5s;
}

.mobile .setting {
    display: none
}

:deep(.login-button) {
    @media screen and (max-width: 1000px) {
        display: none;
    }
}

:deep(.login-button) {
    position: absolute;
    top: 4px;
    right: 10px;
}

:deep(.c_menu) {
    height: calc(100vh - 20px - var(--font-size) * 2);
}

:deep(.menu-title-name) {
    height: calc(var(--font-size) * 2) !important;
    margin: 10px 0 !important;
    font-size: calc(var(--font-size) + 3px) !important;
}

:deep(.user-avatar) {
    transform: translateX(60px);
    transition: transform 0.3s;
}
</style>
